<template>
  <div class="app-page-tabs-container">
    <app-horizontal-scroll-pane class="app-page-tabs-wrapper" ref="scrollPaneRef">
      <router-link
        :ref="setTagViewsRef"
        class="app-page-tabs-item"
        :to="tag"
        v-for="tag in Array.from<any>(visitedViews)"
        :key="tag.path"
      >
        <app-dynamic-icon iconName="FileOutlined" :iconProps="{ class: 'icon-file' }" />
        <span>{{ tag.title }}</span>
        <span @click.prevent.stop="closeSelectedTag(tag)">
          <app-dynamic-icon
            iconName="CloseOutlined"
            :iconProps="{ class: 'icon-close' }"
          />
        </span>
      </router-link>
    </app-horizontal-scroll-pane>

    <div class="app-page-tabs-btns">
      <div class="app-page-tabs-move-to" @click="moveToLeft">
        <app-dynamic-icon iconName="LeftOutlined" />
      </div>

      <div class="app-page-tabs-move-to" @click="moveToRight">
        <app-dynamic-icon iconName="RightOutlined" />
      </div>

      <div class="app-page-tabs-more">
        <a-dropdown :placement="'bottomLeft'" :trigger="['click']">
          <template #overlay>
            <a-menu>
              <a-menu-item
                key="closeSelectedTag"
                @click="closeSelectedTag(selectedTag.value)"
              >
                关闭当前
              </a-menu-item>
              <a-menu-item key="closeOthersTags" @click="closeOthersTags">
                关闭其他
              </a-menu-item>
              <a-menu-item key="closeAllTags" @click="closeAllTags">
                关闭所有
              </a-menu-item>
            </a-menu>
          </template>
          <div class="app-page-tabs-more-btn">
            更多
            <app-dynamic-icon iconName="SvgIconMore" :iconProps="{ class: 'icon' }" />
          </div>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useStore } from "vuex";
import {
  defineComponent,
  reactive,
  ref,
  computed,
  nextTick,
  onUnmounted,
  onMounted,
} from "vue";
import HorizontalScrollPane from "@/platform/components/scroll-pane/HorizontalScrollPane.vue";
import {
  useRoute,
  onBeforeRouteUpdate,
  RouteLocationNormalizedLoaded,
  useRouter,
  RouteLocationNormalized,
} from "vue-router";
import Environments from "@/platform/commons/utils/env-util";

export default defineComponent({
  name: "PageTabs",
  components: {
    AppHorizontalScrollPane: HorizontalScrollPane,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();

    const selectedTag = reactive<any>({});

    const tagViewsRef: any[] = [];
    const scrollPaneRef = ref<any>(null);

    /**
     * 列表
     */
    const visitedViews = computed(() => {
      return store.getters["tagsViewState/getVisitedViews"];
    });

    const setTagViewsRef = (el: any) => {
      tagViewsRef.push(el);
    };

    /**
     * 是否激活
     */
    const isActive = (view: RouteLocationNormalizedLoaded | RouteLocationNormalized) => {
      return view.path === selectedTag.value.path;
    };

    /**
     * 添加
     */
    const addViewTag = (
      currentRoute: RouteLocationNormalizedLoaded | RouteLocationNormalized
    ) => {
      if (currentRoute && currentRoute.name) {
        selectedTag.value = currentRoute;
        store.dispatch("tagsViewState/addVisitedView", currentRoute);
        moveToCurrentTag();
      }
    };

    /**
     * 移动
     */
    const moveToCurrentTag = () => {
      const tags = tagViewsRef;
      nextTick(() => {
        for (const item of tags) {
          if (item && item.to.path === selectedTag.value.path) {
            scrollPaneRef.value.moveToTarget(item.$el);
            break;
          }
        }
      });
    };

    /**
     * 关闭选择
     */
    const closeSelectedTag = (
      view: RouteLocationNormalizedLoaded | RouteLocationNormalized
    ) => {
      if (
        visitedViews.value.length == 1 &&
        view.path === Environments.getEvnProp("VITE_HOME_ROUTER")
      ) {
        return;
      }
      store.dispatch("tagsViewState/delVisitedView", view).then((views) => {
        if (isActive(view)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            router.push(latestView);
          } else {
            router.push(Environments.getEvnProp("VITE_HOME_ROUTER"));
          }
        }
        scrollPaneRef.value.resize();
      });
    };

    /**
     * 关闭其它
     */
    const closeOthersTags = () => {
      router.push(selectedTag.value);
      store.dispatch("tagsViewState/delOthersViews", selectedTag.value).then(() => {
        moveToCurrentTag();
      });
    };

    /**
     * 关闭所有
     */
    const closeAllTags = () => {
      // 如果当前路由是首页，直接关闭其它，保留首页
      if (selectedTag.value.path === Environments.getEvnProp("VITE_HOME_ROUTER")) {
        closeOthersTags();
      } else {
        //如查当前路由不是首页，直接关闭所有，并添加首页
        store.dispatch("tagsViewState/delAllViews");
        router.push(Environments.getEvnProp("VITE_HOME_ROUTER"));
        moveToCurrentTag();
      }
    };

    /**
     * 左移
     */
    const moveToLeft = () => {
      scrollPaneRef.value.moveToLeft();
    };

    /**
     * 右移
     */
    const moveToRight = () => {
      scrollPaneRef.value.moveToRight();
    };

    /**
     * 初始化
     */
    (() => {
      addViewTag(route);
      onBeforeRouteUpdate((to: RouteLocationNormalized) => {
        nextTick(() => {
          addViewTag(to);
        });
      });
    })();

    onMounted(() => {
      addViewTag(route);
    });

    onUnmounted(() => {
      store.dispatch("tagsViewState/delAllViews");
    });

    return {
      setTagViewsRef,
      scrollPaneRef,
      selectedTag,
      visitedViews,
      closeSelectedTag,
      closeOthersTags,
      closeAllTags,
      moveToLeft,
      moveToRight,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./PageTabs.less";
</style>
